<template>
    <div>

        <el-row></el-row>

        <el-row>
            <el-select v-model="typeId" placeholder="请选择题目类型">
                <el-option v-for="(key, index) in typeList" :label="key.name" :value="key.id"></el-option>
            </el-select>
        </el-row>

        <el-row>
            <el-select v-model="sort" placeholder="请选择题目格式">
                <el-option label="选择题" value=1></el-option>
                <el-option label="填空题" value=2></el-option>
                <el-option label="简答题" value=3></el-option>
            </el-select>
        </el-row>

        <el-row>

            <el-input v-model="title" placeholder="请输入题目标题"></el-input>
            <el-upload class="upload-demo" :action="uploadUrl" :file-list="fileList1" :before-upload="beforeUpload1"
                :on-success="handleSuccess1">
                <el-button size="small" type="primary">点击上传题目标题文件</el-button>
            </el-upload>

        </el-row>

        <el-row></el-row>
        <el-row></el-row>
        <el-row></el-row>

        <el-row>
            <el-input v-model="content" placeholder="请输入题目答案"></el-input>
            <el-upload class="upload-demo" :action="uploadUrl" :file-list="fileList2" :before-upload="beforeUpload2"
                :on-success="handleSuccess2">
                <el-button size="small" type="primary">点击上传题目答案文件</el-button>
            </el-upload>
        </el-row>

        <el-row></el-row>
        <el-row></el-row>
        <el-row></el-row>


        <el-row>
            <el-button type="success" @click="submit">提交题目</el-button>
        </el-row>
    </div>
</template>

<script>
import API from '../plugins/axios'
export default {
    data() {
        return {
            title: '',
            content: '',
            fileList1: [],
            fileList2: [],
            uploadUrl: this.$baseUrl + '/file/upload',
            previewUrl: this.$baseUrl + '/file/preview/',
            typeId: '',
            typeList: [
                {
                    id: '1234',
                    name: '英语'
                },
                {
                    id: '5678',
                    name: '数学'
                }
            ],
            sort: ''
        }
    },
    methods: {
        submit() {
            API({
                url: '/problem/addProblem',
                method: 'post',
                data: {
                    'title': this.title,
                    'content': this.content,
                    'sort': this.sort
                }
            }).then((res) => {
                if (res.data.data === true) {
                    this.$message({
                        message: '题目添加成功',
                        type: 'success'
                    });
                }
            });
        },
        beforeUpload1(file) {
            console.log(file);
            return true;
        },
        handleSuccess1(res, file) {
            console.log(res, file);
            this.title = this.previewUrl + res.data;
        },
        beforeUpload2(file) {
            console.log(file);
            return true;
        },
        handleSuccess2(res, file) {
            console.log(res, file);
            this.content = this.previewUrl + res.data;
        }
    },
    mounted: function () {
        API({
            url: '/problem/getProblemList',
            method: 'get'
        }).then((res) => {
            console.log(res.data.data);
            this.problemList = res.data.data;
        });

    }
}
</script>

<style scoped>
.el-row {
    margin: 10px;
}
</style>